<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本绑定</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>
    <div id="app_form">
        <p>单行文本显示</p>
        <input v-model="text" placeholder="Edit Me"/>
        <p>Message is {{text}}</p>

        <br>

        <!--在文本区域插值( <textarea></textarea> ) 并不会生效，应用 v-model 来代替-->
        <p>多行文本显示</p>
        <textarea v-model="textarea" placeholder="add multiple lines"></textarea>
        <p style="white-space: pre-line">Multiline Message is {{ textarea }}</p>

        <!--复选框-->
        <p>单选框文本显示，显示的是布尔值</p>
        <!--1、单选框显示的是逻辑值-->
        <input type="checkbox" id="checkbox" v-model="checked">
        <!--label 的 for 属性规定 label 与哪个表单元素绑定。-->
        <label for="checkbox">{{ checked }}</label>


        <br>
        <p>多选框文本显示，数组</p>
        <!--2、多选框显示的是绑定value -->
        <input type="checkbox" id="andy" v-model="names" value="Andy is a beautiful girl">
        <label for="andy">Andy</label>
        <input type="checkbox" id="tom" v-model="names" value="Tom is a handsome boy">
        <label for="tom">Tom</label>
        <input type="checkbox" id="jerry" v-model="names" value="Jerry is teacher">
        <label for="jerry">Jerry</label>

        <p>Messages are {{names}}</p>

    </div>

    <script>
        var app_form = new Vue({
            el:'#app_form',
            data:{
                text:'',
                textarea:'',
                checked:true,
                names:[],
            }
        })

    </script>

</body>
</html>